<!-- 主页 -->
<template>
	<view :class="['content', show || maskFlag  ? 'un_touch' : '']">
		<view>
			<view class="search_bg">
				<view class="imgbg">
					<swiper
						class="swiper"
						circular
						:autoplay="true"
						:interval="5000"
						:duration="500"
						indicator-dots
						indicator-color="rgba(255,255,255,.3)"
						indicator-active-color="#ffffff"
					>
						<swiper-item v-for="(item, index) in banner" :key="index" @click.stop="goBannerDetail(item)">
							<view class="swiper-item"><image :src="item.imgUrl" mode="aspectFill"></image></view>
						</swiper-item>
					</swiper>
				</view>
				
				<!-- <view class="top-header flex align-center" :style="{'height':barHeight+'px','left':'40rpx','top':barTop+'px'}"> -->
				 
				<!--  #ifdef MP-WEIXIN -->
					<view class="top-header flex align-center" >
						<image class="icon-neck_wx" :style="{'left':'49rpx','top':searchTop +'rpx'}" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/TieSmall.png" @tap.stop="toOccupation"></image>
					</view> 
					<view class="flex align-center search_position_wx " :style="{'height':0 +'px','left':'106rpx','top':(barTop+barBottom)/2 +'px'}">
						<view class="search_box" @click.stop="search">
							<view class="left">
								<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/search.png" class="search"></image>
								<input type="text" placeholder="请输入搜索内容" placeholder-class="search_placeholder" placeholder-style="color: #ffffff" v-model="searchValue" />
							</view>
						</view>
					</view>
				<!--  #endif -->
				<!--  #ifdef APP-PLUS -->
				<view class="top-header flex align-center" :style="{'height':0 +'px','left':'40rpx','top':0 +'px'}">
					<image class="icon-neck" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/TieSmall.png" @tap.stop="toOccupation"></image>
				</view>
				<view class="flex align-center search_position">
					<view class="search_box" @click.stop="search">
						<view class="left">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/search.png" class="search"></image>
							<input type="text" placeholder="请输入搜索内容" placeholder-class="search_placeholder" v-model="searchValue" />
						</view>
					</view>
				</view>
				<!--  #endif -->
			</view>

			<!-- 分隔符号 ---- 未选择职业体系前  -->
			<view class="" v-if="!labelPostShowFlag">
				<!-- 分类2 -->
				<view class="options1">
					<!-- 展示3个一级分类 -->
					<view class="styles2" v-if="isShow">
						<view class="image2" v-for="(item, index) in cate" :key="index"><image :src="item.icon" @click="goCourseClass(item)"></image></view>
					</view>
					<!-- 展示不是3个一级分类 -->
					<view class="styles1" v-else>
						<view class="image1" v-for="(item, index) in cate" :key="index"><image :src="item.icon" @click="goCourseClass(item)"></image></view>
					</view>
				</view>
				<!-- 已知话题 -->
				<view class="context_center">
					<view class="navigation">
						<view class="text_font">
							<view class="text">已知话题</view>
							<view class="linear"></view>
						</view>
						<view class="flex align-center">
							<text class="more_text" @click="topic">更多</text>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/rightDown.png" class="rightDown"></image>
						</view>
					</view>
					<!-- 话题list -->
					<block v-if="topics.length">
						<view class="topic relative" v-for="(item, index) in topics" :key="index" @click="goTopic(item.id)">
							<view class="flex border_bottom align-center">
								<view class="flex justify_between align-center padding_box">
									<view class="flex align-center">
										<avatar class="avater" :src="item.headPortrait"></avatar>
										<view class="textStyle">`{{ item.nickName }}`发布</view>
									</view>
									<view class="textStyle">{{ item.readNum || 0 }}人参与</view>
								</view>
							</view>
							<view class="padding_box_text">
								<text class="title_font">{{ item.title }}</text>
								<view class="words" v-if="item.words">
									<view class="prompt_text" v-for="(cell, idx) in item.words" :key="idx">#{{ cell }}#</view>
								</view>
								<!-- <view class="topic_content">
									{{ item.content }}
								</view> -->
							</view>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/bg1.png" class="img_position"></image>
						</view>
					</block>
				</view>
				<!-- 已知小课 循环渲染课程-->
				<view class="context_center">
					<view class="navigation" style="padding-top: 20rpx;">
						<view class="text_font">
							<view class="text">已知小课</view>
							<view class="linear"></view>
						</view>
						<view class="flex align-center">
							<text class="more_text" @click="moreCourse">更多</text>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/rightDown.png" class="rightDown"></image>
						</view>
					</view>
					<!-- 循环课程 -->
					<view class="course_box">
						<view class="buyCourse" v-for="(item, index) in courseList" :key="index" @click="courseItem(item.id)">
							<image :src="item.coverImg" mode="aspectFill"></image>
							<view class="buyCourse_Info">
								<view class="flex justify_between">
									<view class="price">{{ item.isBuy == 1 ? '已购买' : item.isFree == 1 || item.coursePrice == 0 ? '免费' : '￥' + item.coursePrice }}</view>
									<view class="teacher">讲师：{{ item.lecturerName }}</view>
								</view>
								<view class="buyCourse_text">{{ item.resourceName }}</view>
								<view class="fontSize12 flex">
									<view class="flex align-center">
										<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/watch.png"></image>
										<view class="">{{ item.watchNum }}</view>
									</view>
									<view class="flex praise align-center ">
										<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/praiseIcon.png"></image>
										<view class="">{{ item.greatNum }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 在选择职业体系之后，显示这一块 -->
			<newYizhiIndex ref="newYizhiIndex" v-if="labelPostShowFlag"></newYizhiIndex>
			<!-- end -->
		</view>
		<!-- 广告 -->
		<openAdv v-if="show" :adv="adv" :show="show" @close="closeAdv"></openAdv>
		<!-- 计算的时候遮罩层及Loading  -->
		<view class="blank-pages-mask" v-if="maskFlag">
			<view class="loading">
				<image class="loadingIconCss" ref="loadingIcon" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/loading-icon.gif" mode=""></image>
				<view class="loading_text">{{ loadingText }}</view>
			</view>
		</view>
		<!-- 更新 -->
		<upDatePopup :show.sync="showUpdate"></upDatePopup>
	</view>
</template>

<script>
import { versionUpdate,getBanner, topicList, resourceList, courseCategory, pageIndex, activeUser, memberLabel, getYzHome } from '@/apis/apis.js';
import avatar from '@/components/avatar.vue';
import openAdv from '@/components/openAdv/openAdv.vue';
import newYizhiIndex from '@/pages/index/newIndex.vue';
	import upDatePopup from "@/pages/components/upDate_popup.vue"
export default {
	components: {
		avatar,
		openAdv,
		newYizhiIndex,
		upDatePopup
	},
	data() {
		return {
			adv: null, //海报
			show: false, // 海报弹出
			banner: [],
			searchValue: '', //搜索框输入的值
			topics: [], // 话题
			courseList: [], // 课程展示6个阅读量最多的可后台设置
			cate: [], //分类
			isShow: false, //分类只有有三个展示的样式
			bannerH: 0,
			bannerW: 0,
			industryInfo: [],
			// 标志位，是否已经选择了职业岗位
			labelPostShowFlag: false,
			isShowMoney: false,
			isios: false,

			// 计算的时候loading
			loadingText: '正在计算...',
			maskFlag: false,
		
			showUpdate:false,//更新升级
			barTop: 0,
			barHeight: 0,
			searchTop: 0,
			barBottom:0,
			// position: "top", //设置openclose组件的位置为顶部
			// show: true, //显示openclose组件
		};
	},
	onLoad(opent) {
		function pxToRpx(px) {
		     const screenWidth = wx.getSystemInfoSync().screenWidth
		     return px * 750 / screenWidth
		   }
		// #ifdef MP-WEIXIN
		let res = uni.getMenuButtonBoundingClientRect()
		this.barHeight = res.height
		this.barTop = res.top
		this.barBottom = res.bottom
		this.searchTop = pxToRpx((this.barTop + this.barBottom) / 2 ) - 25;
		this.c = res.bottom * 2 + 4 + 'rpx'
		// #endif
		const systemInfo = uni.getSystemInfoSync()
		const capsulePosition = uni.getMenuButtonBoundingClientRect()
		const capsuleLeft = systemInfo.screenWidth - capsulePosition.right
		  this.setData({
		    capsuleLeft,
		  })
		let that = this;
		const { type } = opent;
		// 判断是否点了稍后下载
		let showUpDate = sessionStorage.getItem("showUpDate");
		if(!showUpDate)this.getUpdate();
		
		// 代表是选择职务岗位
		if (type == 99) {
			this.maskFlag = true;
		}
		uni.getSystemInfo({
			success: function(res) {
				if (res.platform == 'ios') {
					that.isios = true;
				}
			}
		});
		
	},
	mounted() {
		// 广告弹出
		this.getadv();
		// 隐藏兴趣tabbar
		// uni.setTabBarItem({
		// 	index: 2, //要修改的下标
		// 	visible: false
		// });

		// #ifdef APP-PLUS
		// 极光推送绑定设备id
		const jyJPush = uni.requireNativePlugin('JY-JPush');
		jyJPush.setJYJPushAlias(
			{
				userAlias: uni.getStorageSync('USER_DATA').memberId + ''
			},
			result => {
				console.log('极光推送绑定用户id', result);
			}
		);
		// #endif
	},
	onShow() {
		const token = uni.getStorageSync('token');
		this.init();
		if(token){
			this.recorde();
			this.getOccupationInfo();
		}
		
		
		try {
			if(this.$refs.newYizhiIndex)this.$refs.newYizhiIndex.getList();
		} catch (e) {}
	},
	methods: {
		// 获取版本更新
		async getUpdate() {
			const {data}= await versionUpdate(); // 最新版本
			// #ifdef APP-PLUS
			let run = plus.runtime
			if (!data || (data.version == run.version && data.versionCode == run.versionCode)
				||run.versionCode>data.versionCode
			) {
				this.showUpdate = true
				return false
			}
			// #endif
		},
		async recorde() {
			const res = await activeUser();
		},
		closeAdv() {
			this.show = false;
			this.adv = null;
		},
		// 海报弹窗 
		async getadv() {
			const adv = await pageIndex();
			// console.log('弹窗', adv) 
			this.adv = adv.data;
			if (this.adv) {
				this.$nextTick(() => {
					this.show = true;
				});
			}
		},
		async init() {

			// 轮播
			const banner = await getBanner();
			this.banner = banner.data;
			//分类
			const cate = await courseCategory();
			// this.cate = cate.data.filter((el, index) => index < 4);
			if (cate.data.length == 3) {
				this.isShow = true;
			}
			this.cate = cate.data;

			// 首页话题
			const topic = await topicList({
				pageNum: 1,
				pageSize: 100
			});
			topic.data.forEach(el => {
				if (el.workKey) {
					el.words = el.workKey.split(',');
				}
			});
			topic.data.sort((a, b) => {
				return b.readNum - a.readNum;
			});
			this.topics = topic.data.filter((el, index) => index < 3);
			// 小课
			const course = await resourceList({
				pageNum: 1,
				pageSize: 6,
				type: 0
			});
			this.courseList = course.data;
			if (this.courseList[0].flag && this.isios) {
				this.isShowMoney = false;
			} else {
				this.isShowMoney = true;
			}
		},
		// 点击轮播图
		goBannerDetail(v) {
			// console.log('点击轮播图', v);
			// 0不跳转 1单独详情页  2内页面 3外链
			if (v.linkType == 0) return;
			if (v.linkType == 1) {
				uni.navigateTo({
					url: `./banner/banner?id=${v.id}`
				});
			}
			if (v.linkType == 2) {
				uni.navigateTo({
					url: v.linkUrl
				});
			}
			if (v.linkType == 3) {
				const url = encodeURIComponent('http://' + v.linkUrl);
				uni.navigateTo({
					url: `/pages/outsideLink/outsideLink?url=${url}`
				});
			}
		},

		// 一级分类
		goCourseClass(e) {
			uni.navigateTo({
				url: './morecourse/morecourse?id=' + e.id + '&title=' + e.title
			});
		},
		// 随堂测试
		Improve() {
			uni.navigateTo({
				url: './improve/improve'
			});
		},
		//更多课程
		moreCourse() {
			console.log('跳转');
			uni.navigateTo({
				url: './morecourse/morecourse'
			});
		},
		//搜索
		search() {
			uni.navigateTo({
				url: './search/search'
			});
		},
		// 跳转话题页面
		goTopic(id) {
			uni.navigateTo({
				url: `/pages/topic/topicDetail/topicDetail?id=${id}`
			});
		},
		//跳转课程页面
		courseItem(id) {
			uni.navigateTo({
				url: './courseItem/	?id=' + id
			});
		},
		//更多已知话题
		topic() {
			uni.switchTab({
				url: '../topic/topic'
			});
		},
		// 职业体系
		toOccupation() {
			uni.navigateTo({
				url: '/pages/occupation/occupationChoice/occupationChoice'
			});
		},
		// 获取已经选择的行业&岗位信息
		getOccupationInfo() {
			memberLabel().then(res => {
				this.memberLabelVo = res.data || res.rows || {};
				uni.setStorageSync('local_memberLabelVo', JSON.stringify(this.memberLabelVo));
				// 解析参数与重新赋值
				if (this.memberLabelVo.labelPostName) {
					this.industryInfo = this.memberLabelVo.labelPostName.split(',').map((v, index) => ({
						id: (this.memberLabelVo.labelInterestIds + '').split(',')[index],
						name: (this.memberLabelVo.labelPostName + '').split(',')[index],
						parentId: (this.memberLabelVo.labelPostOneIds + '').split(',')[index]
					}));
					this.contentInfo = {
						id: this.memberLabelVo.studyContentId,
						name: this.memberLabelVo.studyContent
					};
				}
				this.labelPostShowFlag = this.memberLabelVo.labelPostIds ? true : false;
				setTimeout(()=>{
					this.maskFlag = false;
				},2000)
			});
		},
	},
	onPullDownRefresh() {
		if(this.$refs.newYizhiIndex)this.$refs.newYizhiIndex.getList();

		let timer = setTimeout(() => {
			this.init();
			clearTimeout(timer);
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="scss" scoped>
$text_Size: 34rpx;
$text_blod: 700;
$moreColor: #989898;
$fontSize13: 26rpx;
$text_color: #7e7e7e;
$priceColor: #ffa025;
$priceTextSize: 22rpx;

::v-deep .uni-swiper-dots {
	bottom: 60rpx;
}
.content {
	background-color: #f8f8f8;
	width: 100%;
	// height: 100vh;
	// overflow-x: hidden;
	// overflow-y: auto;
}
.un_touch {
	position: fixed;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
.search_bg {
	width: 100vw;
	box-sizing: border-box;
}
.icon-neck {
		width: 31rpx;
		height: 46rpx;
		position: absolute;
		top: 119rpx;
		left: 49rpx;	
}
.icon-neck_wx {
		width: 31rpx;
		height: 46rpx;
		position: absolute;
		// top: this.searchTop;
}
.search_position_wx{
	position: absolute;
	width: calc(100vw - 353rpx);
	input::placeholder {
	  color: #fff;
	}
}
.search_position {
	position: absolute;
	left: 106rpx;
	top: 104rpx;
	width: calc(100vw - 152rpx);
}
.search_box {
	width: 397.3rpx;
	flex: 1;
	height: 70rpx;
	background: rgba(246, 248, 249, 0.3);
	border-radius: 35rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	color: #fff;

	.left {
		height: 100%;
		flex: 1;
		display: flex;
		align-items: center;

		.search {
			width: 36rpx;
			height: 36rpx;
			margin: 0 20rpx 0 30rpx;
		}

		& > input {
			height: 100%;
			flex: 1;
		}

		.search_placeholder {
			font-size: 28rpx;
			color: #ffffff;
		}

		.text {
			color: #fff;
			font-size: 30rpx;
			line-height: 52rpx;
		}
	}

	.right {
		height: 100%;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
		padding: 0 20rpx;
	}
}



.imgbg {
	width: 100vw;
	height: 660rpx;
	border-bottom-left-radius: 0rpx;
	border-bottom-right-radius: 0rpx;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	.swiper {
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}



.flex {
	display: flex;
}

.justify_between {
	justify-content: space-between;
}

.align-center {
	align-items: center;
}

.options1 {
    margin: -40rpx 0;
    padding: 40rpx 25rpx 10rpx 25rpx;
    width: 100%;
    background-color: #f5f5f5;
    box-sizing: border-box;
    border-radius: 40rpx 40rpx 0 0;
    position: relative;

	.styles1 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.image1 {
			width: 346rpx;
			height: 152rpx;
			margin-bottom: 16rpx;

			& > image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.styles2 {
		// display: flex;
		// justify-content: space-between;
		width: 100%;
		overflow: hidden;

		.image2 {
			float: right;
			width: 346rpx;
			height: 152rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 16rpx;

			& > image {
				width: 100%;
				height: 100%;
			}
		}

		.image2:first-child {
			float: left;
			width: 49%;
			height: 324rpx;
			border-radius: 10rpx;
			overflow: hidden;

			& > image {
				width: 100%;
				height: 100%;
			}
		}

		.image3_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// width: 346rpx;
			width: 49%;

			.image3 {
				// box-shadow: 0px 5px 19px 1px rgba(197, 205, 211, 0.14);
				& > image {
					// width: 346rpx;
					width: 100%;
					height: 152rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
}

.context_center {
	width: 91vw;
	margin: 0 auto;
	
	.course_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: flex-start;
	}
}

.rightDown {
	width: 14rpx;
	height: 26rpx;
	margin-left: 10rpx;
}

.text_font {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 99;

	.text {
		font-size: $text_Size;
		font-weight: $text_blod;
		color: #303030;
		position: absolute;
		// // left: 0;
		// top: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.linear {
		width: 141rpx;
		height: 20rpx;
		background: linear-gradient(90deg, #f7fcfe, #f9ce84);
		background: -moz-linear-gradient(90deg, #f7fcfe, #f9ce84);
		background: -o-linear-gradient(90deg, #f7fcfe, #f9ce84);
	}
}

.more_text {
	color: $moreColor;
	font-size: $fontSize13;
}

.navigation {
	margin: 45rpx 0;
	display: flex;
	justify-content: space-between;
}

.topic {
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 37rpx;

	.avater {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		border-radius: 50%;
		overflow: hidden;
	}
}

.padding_box {
	width: 100%;
	padding: 0 20rpx;
}

.border_bottom {
	width: 100%;
	height: 100rpx;
	border-bottom: 1rpx dashed #e5eae9;
	// padding: 0 -10rpx;
}

.textStyle {
	font-size: $fontSize13;
	color: $text_color;
}

.relative {
	position: relative;
	overflow: hidden;
}

.img_position {
	width: 156rpx;
	height: 146rpx;
	position: absolute;
	right: 0;
	top: 123rpx;
	// z-index: -1;
}

.padding_box_text {
	padding: 24rpx;
	.title_font {
		font-size: 30rpx;
		font-weight: bold;
	}
}

.words {
	display: flex;
	padding: 20rpx 0;
	align-items: center;

	.prompt_text {
		color: #4f9bf1;
		font-size: $fontSize13;
		margin-right: 5rpx;
	}
}

.topic_content{
	margin-top: 12px;
	border-radius: 10px;
	font-size: 26rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; 
	/* 显示两行 */
	text-align: justify; /* 文本两端对齐 */
	line-height: 2em; /* 行高，这里是1.5倍字体大小，可以根据需要调整 */
	height: 5.1em; /* 可以调整显示的行数 */
	padding: 8px 12px; 
	background-color: #EAF9FF;
	color: #79A6DA;
}

.buyCourse {
	width: 334rpx;
	// height: 474rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	overflow: hidden;

	.buyCourse_text {
		font-size: 30rpx;
		color: #111;
		margin-top: 10rpx;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2; /* 两行 */
		line-clamp: 2; /* 新版本的 CSS 约束，可以保持对未来版本的兼容性 */
		height: 2.7rem; /* 单位是 rpx，根据需要自行调整 */
	}
}

.buyCourse image {
	width: 100%;
	height: 334rpx;
}

.buyCourse_Info {
	position: relative;
	padding: 20rpx 25rpx;
}

.price {
	color: $priceColor;
	font-size: 28rpx;
	font-family: PingFang-SC-Bold;
	font-weight: 700;
}

.teacher {
	color: #b2b2b2;
	font-size: $fontSize13;
	width: 160rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.praise {
	margin: 0 0 0 54rpx;
}

.fontSize12 {
	font-size: 24rpx;
	color: #b0b0b0;
	margin-top: 20rpx;

	image {
		width: 26rpx;
		height: 18rpx;
	}
}
.occupation-text {
	overflow-x: hidden;
	// max-width: 174rpx;
	white-space: nowrap;
}
// 计算loading
.blank-pages-mask {
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	.loading {
		color: #ffffff;
		letter-spacing: 2rpx;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		text-align: center;
		image {
			width: 100vw;
			height: 100vw;
			border-radius: 50%;
			transition: all 0.5s;
		}
	}
	.loading_text{
		font-size: 40rpx;
		color:#f6f6f6;
	}
}
</style>
